<!-- 第三页 -->
<template>

  <div>
    <!-- <div id="page-three" class="page-three" :style=" 'height:'+curHeight+'px' ">1</div> -->
    <!-- type="textarea"
    :autosize="{ minRows: 1, maxRows: 4}" -->

    <!--el-collapse v-model="activeNames" style="border: 0;">
      <el-collapse-item style="height: 0; margin-botttom:0;" name="nav"-->
    <!-- 导航栏 -->
    <nav-menu :pageIndex="pageIndex"></nav-menu>
    <!--/el-collapse-item>
  </el-collapse-->
    <div id="page-three" class="page-three" style="display: inline-block;">
      <div class="item" style="overflow-y: auto; color: #000; margin-top: 1%; text-align:center">
        <el-input placeholder="请输入搜索内容" v-model="input" class="input-with-select" style="width:990px">
          <el-select v-model="select" slot="prepend" placeholder="所有" style="width:200px">
            <el-option label="所有" value=""></el-option>
            <el-option label="文章" value="paper"></el-option>
            <el-option label="作者" value="author"></el-option>
            <el-option label="机构" value="institution"></el-option>
            <el-option label="报纸" value="newspaper"></el-option>
            <el-option label="期刊" value="periodical"></el-option>
            <el-option label="会议" value="conference"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
        </el-input>
        <p/>
        <!--p style="font-size: 14px"><div style="font-weight: bold;">Topics:</div> GPT-3, 弱监督学习, AI医疗, 信息检索与推荐</p-->
        <el-divider></el-divider>
        <div v-loading="isLoading">
          <el-row>
            <el-col :span="4">
              <div style="display:flex">
                <i class="el-icon-document" style="font-size:84px"></i>
                <el-col>
                  <p style="font-size: 14px; ">文章<br></p>
                  <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.paperCount }}</p>
                </el-col>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="display:flex">
                <i class="el-icon-s-custom" style="font-size:84px"></i>
                <el-col>
                  <p style="font-size: 14px; ">作者<br></p>
                  <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.authorCount }}</p>
                </el-col>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="display:flex">
                <i class="el-icon-school" style="font-size:84px"></i>
                <el-col>
                  <p style="font-size: 14px; ">机构<br></p>
                  <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">
                    {{ data.institutionCount }}</p>
                </el-col>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="display:flex">
                <i class="el-icon-document-copy" style="font-size:84px"></i>
                <el-col>
                  <p style="font-size: 14px; ">报纸<br></p>
                  <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.newspaperCount }}</p>
                </el-col>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="display:flex">
                <i class="el-icon-notebook-2" style="font-size:84px"></i>
                <el-col>
                  <p style="font-size: 14px; ">期刊<br></p>
                  <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.periodicalCount }}</p>
                </el-col>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="display:flex">
                <i class="el-icon-data-analysis" style="font-size:84px"></i>
                <el-col>
                  <p style="font-size: 14px; ">会议<br></p>
                  <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.conferenceCount }}</p>
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" style="flex-wrap: wrap; flex-direction: row; margin-top: 2vh;">
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 20px">热门作者</span>
                  <el-button style="float: right; padding: 3px 0" type="text" v-if="false">查看更多</el-button>
                </div>
                <div v-for="(item,index) in data.authorList" :key="index" class="text item" style="font-size: 16px">
                  <el-link :href="'/#/author?id='+item.id">{{ item.name + " (" + item.count + ")" }}</el-link>
                </div>
              </el-card>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 20px">热门报纸</span>
                  <el-button style="float: right; padding: 3px 0" type="text" v-if="false">查看更多</el-button>
                </div>
                <div v-for="(item,index) in data.newspaperList" :key="index" class="text item" style="font-size: 16px">
                  <el-link :href="'/#/from?id='+item.id">{{ item.name + " (" + item.count + ")" }}</el-link>
                </div>
              </el-card>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 20px">热门来源</span>
                  <el-button style="float: right; padding: 3px 0" type="text" v-if="false">查看更多</el-button>
                </div>
                <div v-for="(item,index) in data.fromList" :key="index" class="text item" style="font-size: 16px">
                  <el-link :href="'/#/from?id='+item.id">{{ item.name + " (" + item.count + ")" }}</el-link>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 20px">热门文章</span>
                  <el-button style="float: right; padding: 3px 0" type="text" v-if="false">查看更多</el-button>
                </div>
                <div v-for="(item,index) in data.paperList" :key="index" class="text item" style="font-size: 16px">
                  <el-link :href="'/#/paper?id='+item.id">{{ item.title }}</el-link>
                </div>
              </el-card>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 20px">热门期刊</span>
                  <el-button style="float: right; padding: 3px 0" type="text" v-if="false">查看更多</el-button>
                </div>
                <div v-for="(item,index) in data.periodicalList" :key="index" class="text item" style="font-size: 16px">
                  <el-link :href="'/#/from?id='+item.id">{{ item.name + " (" + item.count + ")" }}</el-link>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 20px">热门机构</span>
                  <el-button style="float: right; padding: 3px 0" type="text" v-if="false">查看更多</el-button>
                </div>
                <div v-for="(item,index) in data.institutionList" :key="index" class="text item"
                     style="font-size: 16px">
                  <el-link :href="'/#/institution?id='+item.id">{{ item.name + " (" + item.count + ")" }}</el-link>
                </div>
              </el-card>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 20px">热门会议</span>
                  <el-button style="float: right; padding: 3px 0" type="text" v-if="false">查看更多</el-button>
                </div>
                <div v-for="(item,index) in data.conferenceList" :key="index" class="text item" style="font-size: 16px">
                  <el-link :href="'/#/from?id='+item.id">{{ item.name + " (" + item.count + ")" }}</el-link>
                </div>
              </el-card>
            </el-col>

          </el-row>
        </div>
        <!--p class="content">{{data.content}}</p-->
      </div>
      <!--div class="suggest">
        {{$t('text.suggest')}}
        <p></p>
      </div-->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import NavMenu from "@/components/NavMenu.vue"

export default {
  components: {
    NavMenu,
  },
  data() {
    return {
      pageIndex: "1", //当前页的序号
      scrolltop: 0, //滑轮距顶部的距离

      activeNames: ['nav'], //折叠面板显示导航栏nav
      curHeight: "", //窗口高度
      data: {},
      input: '',
      select: '',
      isLoading: false, //
      isSearch: false,
    };
  },
  mounted() {
    this.loadAll();
  },
  methods: {
    loadAll() {
      Vue.prototype.post('http://192.168.0.94:2226/show_indexpage', {}, this.getIndexDataSucc)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.curPage = val;
      this.onSearch();
    },
    getIndexDataSucc(response) {
      // if (response.data.error_code === 0) {
      //   this.data = response.data.data;
      //   this.isLoading = false;
      // } else {
      //   alert(Vue.$t('error.getResponse'))
      // }
      this.data = response.data; ///
      console.log('getIndexDataSucc:', response)
      this.isLoading = false;
    },
    onSearch() {
      this.$router.push('/search?keyword=' + encodeURI(this.input))
    },
    searchSucc(response) {
      if (response.data.error_code === 0) {
        this.data = response.data.data;
        this.isLoading = false;
      } else {
        alert(Vue.$t('error.getResponse'))
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.page-three {
  font-size: 36px;
  color: #fff;
  padding: 5%;
  box-sizing: border-box;
  padding-top: 50px;
  display: block;
}

p {
  color: #000;
  font-size: 18px;
  text-align: left;
}

.item {
  float: left;
  width: 100%;
  margin-bottom: 18px;
}

.suggest {
  color: #000;
  font-size: 36px;
  float: right;
  width: 22%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  margin: 10px;
}


.title {
  font-size: 16px;
  float: left;
  text-align: left;
}

.content {
  font-size: 13px;
  color: #000;
}

.id {
  font-size: 13px;
  color: #171;
}

.box-card {
  margin-top: 8px;
  filter: Alpha(opacity=80);
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
